<h1>{{ title }}</h1>

<section class="tlp-pane">
    <div class="tlp-pane-container">
        <div class="tlp-pane-header">
            <h1 class="tlp-pane-title">
                <i class="fa fa-envelope-o tlp-pane-title-icon"></i> {{ subtitle }}
            </h1>
        </div>
        <form action="massmail_execute.php" method="POST" class="tlp-pane-section">
            {{# csrf }}
                {{> csrf_token_input }}
            {{/ csrf }}

            <div id="massmail-header">
                <div class="tlp-form-element">
                    <label class="tlp-label" for="massmail-destination">
                        {{ destination_label }} <i class="fa fa-asterisk"></i>
                    </label>
                    <select class="tlp-select" id="massmail-destination" name="destination">
                        {{# recipients }}
                            <option value="{{ key }}"
                                    data-warning="{{ warning }}"
                                    data-nb-users="{{ nb_users }}"
                            >
                                {{ label }}
                            </option>
                        {{/ recipients }}
                    </select>
                </div>

                <div class="tlp-form-element">
                    <label class="tlp-label" for="subject">{{ subject_label }} <i class="fa fa-asterisk"></i></label>
                    <input type="text"
                           class="tlp-input"
                           id="subject"
                           name="mail_subject"
                           placeholder="{{ subject_placeholder }}" required>
                </div>
            </div>

            <div class="tlp-form-element">
                <label class="tlp-label" for="mail_message">{{ content_label }}</label>
                <textarea class="tlp-textarea"
                          id="mail_message"
                          name="mail_message"
                          rows="10"
                          placeholder="{{ content_placeholder }}" ></textarea>
            </div>

            <div class="tlp-form-element">
                <label class="tlp-label" for="massmail-preview-destination">{{ preview_label }}</label>
                <div id="massmail-preview">
                    <select class="tlp-select"
                            id="massmail-preview-destination"
                            name="preview-destination[]"
                            style="width: 100%"
                            multiple
                            data-placeholder="Paul">
                    </select>
                    <span id="massmail-preview-destination-or">or</span>
                    <input type="text"
                           class="tlp-input"
                           id="massmail-preview-destination-external"
                           name="preview-destination-external"
                           placeholder="jdoe@example.com">
                    <button type="button"
                            id="massmail-preview-destination-submit"
                            name="destination"
                            value="preview"
                            class="tlp-append tlp-button-primary tlp-button-outline"
                            title="{{ send_preview_label }}"
                    >
                        <i class="fa fa-paper-plane-o tlp-button-icon"></i> {{ send_preview_label }}
                    </button>
                </div>
            </div>

            <div id="massmail-preview-feedback"></div>

            <div class="tlp-pane-section-submit">
                <button type="submit" class="tlp-button-primary" id="massmail-submit">
                    <i class="fa fa-paper-plane-o tlp-button-icon"></i> {{ send_email_label }}
                </button>
            </div>

            <div id="massmail-modal-warning"
                 class="tlp-modal tlp-modal-warning"
                 role="dialog"
                 aria-labelledby="massmail-modal-warning-label"
            >
                <div class="tlp-modal-header">
                    <h1 class="tlp-modal-title" id="massmail-modal-warning-label">
                        <i class="fa fa-paper-plane-o tlp-modal-title-icon"></i> {{ confirmation_title }}
                    </h1>
                    <div class="tlp-modal-close" data-dismiss="modal" aria-label="Close">
                        ×
                    </div>
                </div>
                <div class="tlp-modal-body">
                    <p>
                        <span id="massmail-warning"></span>
                        {{ confirmation_body }}
                    </p>
                </div>
                <div class="tlp-modal-footer">
                    <button type="button" class="tlp-button-warning tlp-button-outline tlp-modal-action" data-dismiss="modal">
                        {{ cancel }}
                    </button>
                    <button type="button" class="tlp-button-warning tlp-modal-action" id="massmail-confirm-sending">
                        <i class="fa fa-paper-plane-o tlp-button-icon"></i> {{ send_email_label }}
                    </button>
                </div>
            </div>
        </form>
    </div>
</section>